Introdução ao CSS3
CSS Luiz Augusto Vieira 08/01/2018
CSS3 é a terceira versão principal da linguagem principal da World Wide Web, geralmente usada em combinação com o HTML5.
O desenvolvimento do CSS3 começou em 2005 em contraste com outras especificações e modularização. Os módulos CSS3 são descritos em especificações separadas, como Seletores, Consultas de Mídia, Texto, Fundos, Cores, Transformações 2D e 3D, Transições, Animações e Multi-Colunas.
Uma variedade de novas funções e recursos foram introduzidos no CSS3, como: border-radius, box-shadow, background-origin; declaração de cores em HSL, HSLA e RGBA; text-shadow; text-overflow; word-wrap; box-sizing; seletores de atributos; transições; múltiplas origens; layout multicolumn; Fontes da Web; e discurso.
O conjunto de propriedades CSS3 é um superconjunto de versões anteriores do CSS, e as propriedades CSS principais podem ser usadas em qualquer versão, no entanto, o CSS3 introduziu muitos novos recursos e propriedades.
RECURSOS E PROPRIEDADES MAIS COMUNS DO CSS3
Com o CSS3, você pode criar bordas arredondadas, adicionar sombras, usar uma imagem como uma borda e outros estilos avançados sem criar imagens.
BORDER-RADIUS
Com CSS3, você pode adicionar bordas arredondadas para elementos usando individualmente os border-top-left-radius, border-top-right-radius, border-bottom-right-radius, e border-bottom-left-radius ou em conjunto com a sua propriedade estenográfica, border-radius.
Veja abaixo um conjunto de border-radius individualmente para os quatro cantos do bloco:
.bloco {
border: 2px solid;
border-top-left-radius: 32px;
border-top-right-radius: 28px;
border-bottom-right-radius: 23px;
border-bottom-left-radius: 16px;
}
O valor da propriedade border-radius pode ser declarada em ( pixels, em ou % ), que define a forma dos cantos.
.bloco {
border-radius: 2em; /*aqui definimos nosso valor em (2em)*/
}
Os valores de border-radius são declarados na ordem top-left, top-right, bottom-right, e bottom-left.
Se o bottom-left for omitido, é o mesmo que top-right. Se o bottom-right for omitido, é o mesmo que top-left. Se o top-right for omitido, é o mesmo que top-left. Se os quatro valores de border-radius forem iguais, a propriedade border-radius abreviada deve ser usada com esse valor.
BOX-SHADOW
Em CSS3, a propriedade box-shadow é usada para adicionar sombras nos blocos. (Veja o exemplo abaixo):
.bloco {
box-shadow: 10px 10px 5px #333333;
}
TEXT-SHADOW
No CSS3, a propriedade text-shadow adiciona sombras aos textos. (Veja o exemplo abaixo):
.bloco h1 {
text-shadow: 10px 10px 5px #333333;
}
O primeiro valor da propriedade define o deslocamento X, o segundo valor é o Offset Y, o terceiro valor é o deslocamento Z define o borrão e o último valor é a cor da sombra. Se quiser adicionar múltiplas sombras, você deve usar uma vírgula como o separador.
Veja abaixo um exemplo de múltiplas sombras de texto:
.bloco h1 {
text-shadow: 0 1px 0 #333, 0 -1px 0 #333, 1px 0 0 #333, -1px 0 0 #333;
color: #fff;
}
BACKGROUND-SIZE
No CSS3, as imagens de fundo são redimensionáveis, permitindo implementar a imagem de fundo para ocupar todo o espaço disponível ou ser proporcional à tela, independentemente da largura da janela do navegador.
No exemplo abaixo, o nosso background vai ocupar 100% do corpo do página:
body {
background: url('background.jpg') no-repeat;
background-size: 100% 100%; /*vai ocupar 100% no width e height*/
}
Nota: o problema de usar o background-size é que ele vai esticar nossa imagem, distorcendo a mesma. Então, tenha cuidado ao usar dessa forma.
BACKGROUND MÚLTIPLOS
No CSS3, podemos declarar várias imagens como background. Essas imagens devem ser separadas por uma vírgula. (Veja o exemplo abaixo):
#container {
background: url('background.jpg') 0 0 no-repeat, url('background-2.jpg') 100% 0 no-repeat;
}
No exemplo acima, a primeira imagem é colocada na posição superior esquerda (0 0), enquanto a segunda para a posição superior direita (100% 0). Múltiplos background podem ser muito úteis ao aplicar uma textura ou gradiente como o fundo principal.
TRANSITION
Com o CSS3, podemos adicionar efeitos a elementos que mudarão gradualmente de um estilo para outro sem animações de JavaScript ou Flash.
transition-delay determina quando o efeito de transição deve começar;
transition-duration especifica o comprimento do efeito de transição em segundos ou milissegundos;
transition-property identifica a propriedade CSS para o qual o efeito de transição é aplicado;
transition-timing-function especifica a curva de velocidade do efeito de transição;
transition é a propriedade abreviada das quatro propriedades de transição.
Um dos efeitos de transição típicos está associado ao evento quando um usuário está movendo o mouse sobre um elemento.
No exemplo abaixo, especificamos um efeito para o elemento <p>
p:hover{
width: 300px;
}
Se não houver duração especificada, a transição não terá efeito, porque o valor padrão é 0.
Para especificar a duração, a propriedade de transição será aplicada ao nosso efeito, seguida do comprimento de transição, como transition: width 7s;.
Podemos especificar mais de uma propriedade, separas por uma vírgula. (Veja no exemplo abaixo):
p:hover{
transition: width 7s, height 7s, transform 7s;
}
ATÉ O PRÓXIMO POST
Sentiu falta de alguma coisa óbvia? Comente, dei sua opinião, ajude a divulgar o Blog.
Inscreva-se no Youtube: https://www.youtube.com/htmlecsspro
Curta nossa Fanpage: https://www.facebook.com/htmlecsspro
Entre para o nosso Grupo: https://www.facebook.com/groups/htmlecsspro
Olá, deixe seu comentário para Introdução ao CSS3